.ferris_wrap {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'PingFang SC';
  line-height: 1;

  .adm-notice-bar.adm-notice-bar-alert {
    --background-color: rgba(#ff4545, 0.1);
    --border-color: transparent;
    --text-color: #ff4747;
    --height: 36px;
    margin: 6px 0;
  }

  &.wrap_3 {
    background: linear-gradient(180deg, #fcd4d9 0%, #ff9eaa 100%);
  }

  &.wrap_2 {
    background: url('../../../images/ferris_wheel/pink.png') no-repeat;
    background-size: cover;

    .ferris_nav {
      .item {
        &.active {
          background:
            url('../../../images/ferris_wheel/qiu.png') no-repeat,
            linear-gradient(180deg, #ffd7d7 0%, #ff6363 100%);
          background-size: 100%;
        }
      }
    }
  }

  &.wrap_1 {
    background: url('../../../images/ferris_wheel/purple.png') no-repeat;
    background-size: cover;

    .ferris_nav {
      .item {
        background: #45107d;

        &.active {
          background:
            url('../../../images/ferris_wheel/qiu.png') no-repeat,
            linear-gradient(180deg, #5e2cb5 0%, #d963ff 100%);
          background-size: 100%;
        }
      }
    }
  }

  .ferris_nav {
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;

    .item {
      flex: 1;
      background: #fab9bf;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0 0 20px 20px;

      &.active {
        background: linear-gradient(180deg, #ffd7d7 0%, #ff6363 100%);
      }

      .txt {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: #fff;
      }
    }
  }

  .wheel_content {
    margin-top: 10px;
    position: relative;
    min-height: 369px;

    .wheel_info {
      position: relative;
      z-index: 2;
      width: 311px;
      margin: 0 auto;

      .data_list {
        position: relative;
        height: 100%;

        .item {
          width: 52px;
          height: 52px;
          position: absolute;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }

          &.item_1 {
            top: 4px;
            left: 50%;
            transform: translateX(-50%);
          }

          &.item_2 {
            top: 27px;
            right: 56px;
          }

          &.item_3 {
            top: 95px;
            right: 6px;
          }

          &.item_4 {
            top: 172px;
            right: 4px;
          }

          &.item_5 {
            top: 241px;
            right: 55px;
          }

          &.item_6 {
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
          }

          &.item_7 {
            bottom: 28px;
            left: 55px;
          }

          &.item_8 {
            bottom: 95px;
            left: 5px;
          }

          &.item_9 {
            top: 98px;
            left: 4px;
          }

          &.item_10 {
            top: 28px;
            left: 55px;
          }
        }
      }
    }

    .wheel {
      // position: absolute;
      // left: 50%;
      // transform: translateX(-50%);
      // margin-left: calc(-311px / 2);
      width: 311px;
      height: 322px;
      // background: url('../../../images/ferris_wheel/purple_wheel.png') no-repeat;
      // background-size: contain;
      z-index: 2;
      &.play {
        -webkit-animation: rotate-center 2s ease-out both;
        animation: rotate-center 2s ease-out both;
      }
    }

    .wheel_tit {
      position: absolute;
      z-index: 5;
      width: 130px;
      height: 100px;
      // background: url('../../../images/ferris_wheel//purple_title.png') no-repeat;
      // background-size: 100%;
      left: 50%;
      top: 110px;
      transform: translateX(-50%);
    }

    // 奖励列表
    .data_list_reward {
      // margin: 66px 24px 0;
      position: absolute;
      top: 66px;
      padding: 0 24px;
      width: 100%;
      max-height: 260px;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 68px;
        text-align: center;
        margin-right: 20px;
        margin-bottom: 12px;
        position: relative;
        .num {
          position: absolute;
          right: 0;
          top: 0;
          background-color: #ff6d6d;
          border-radius: 4px 4px 4px 0;
          padding: 0px 6px;
          height: 17px;
          line-height: 17px;
          text-align: center;
          color: #fff;
          font-size: 12px;
        }
        &:nth-of-type(4n) {
          margin-right: 0;
        }
        img {
          margin: 0 auto;
          width: 66px;
          height: 66px;
          font-size: 0;
        }
        .name {
          color: #561e1e;
        }
        .price {
          color: #ec5e5e;
        }
        .a {
          margin-left: -4px;
          font-size: 12px;
          width: 120%;
          transform: scale(0.75);
        }
      }
    }

    .ticket_info {
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      display: flex;
      align-items: center;
      .icon {
        margin-left: 10px;
        width: 18px;
        height: 18px;
        background: url('../../../images/ferris_wheel/tick.png') no-repeat;
        background-size: cover;
      }
      .txt {
        flex: 1;
      }
      .btn {
        margin-right: 8px;
        width: 50px;
        height: 24px;
        background: url('../../../images/ferris_wheel/buy_tick.png') no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        > span {
          display: inline-block;
          text-align: center;
          font-size: 12px;
          transform: scale(0.76);
        }
      }
    }

    .wheel_info {
      .btns {
        width: 100%;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        text-align: center;
        .a {
          width: 56px;
          height: 26px;
          line-height: 26px;
          margin: 8px 8px 8px 0;
        }
        .left {
          position: fixed;
          left: 0;
          background: url('../../../images/ferris_wheel/red_l.png') no-repeat;
          background-size: contain;
        }
        .right {
          margin: 8px 0px 8px 8px;
          position: fixed;
          right: 0;
          background: url('../../../images/ferris_wheel/red_r.png') no-repeat;
          background-size: contain;
        }
      }
      .total_price {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 15px;
        color: #ff6464;
        font-size: 14px;
      }
    }

    &.content_1 {
      > .wheel_pice,
      > .record {
        display: none;
      }
      .wheel {
        background: url('../../../images/ferris_wheel/purple_wheel.png') no-repeat;
        background-size: 100%;
      }

      .wheel_tit {
        background: url('../../../images/ferris_wheel/purple_title.png') no-repeat;
        background-size: 100%;
      }
      .wheel_info {
        .btns {
          .left {
            background: url('../../../images/ferris_wheel/purple_l.png') no-repeat;
            background-size: contain;
          }
          .right {
            background: url('../../../images/ferris_wheel/purple_r.png') no-repeat;
            background-size: contain;
          }
        }
        .total_price {
          color: #fff;
        }
      }

      .wheel_base {
        background: url('../../../images/ferris_wheel/purple_di.png') no-repeat;
        background-size: 100%;
        width: 312px;
        height: 164px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 236px;
        z-index: 1;

        .ticket_info {
          margin: 86px auto 0;
          width: 227px;
          height: 31px;
          background: url('../../../images/ferris_wheel/purple_ticket_info.png') no-repeat;
          background-size: contain;
        }

        .use_btns {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 17px;
          margin-top: 28px;

          .btn {
            width: 83px;
            height: 42px;
            background: url('../../../images/ferris_wheel/purple_btn1.png') no-repeat;
            background-size: 100%;

            &:nth-of-type(2) {
              background: url('../../../images/ferris_wheel/purple_btn10.png') no-repeat;
              background-size: 100%;
            }

            &:nth-of-type(3) {
              background: url('../../../images/ferris_wheel/purple_btn100.png') no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      &.show_data {
        .wheel,
        .wheel_tit {
          display: none;
        }
        .wheel_base {
          background: none;
        }
      }
      .data_list_reward {
        .name {
          color: #fff;
        }
        .price {
          color: #ffe658;
        }
      }
    }

    &.content_2 {
      > .wheel_pice,
      > .record {
        display: none;
      }
      .wheel {
        background: url('../../../images/ferris_wheel/pink_wheel.png') no-repeat;
        background-size: contain;
      }

      .wheel_tit {
        background: url('../../../images/ferris_wheel/pink_title.png') no-repeat;
        background-size: 100%;
      }

      .wheel_base {
        background: url('../../../images/ferris_wheel/pink_di.png') no-repeat;
        background-size: contain;
        width: 100%;
        height: 228px;
        position: absolute;
        // left: 50%;
        // transform: translateX(-50%);
        top: 232px;
        z-index: 1;

        .ticket_info {
          margin: 100px auto 0;
          width: 227px;
          height: 31px;
          background: url('../../../images/ferris_wheel/pink_ticket_info.png') no-repeat;
          background-size: 100%;
        }

        .use_btns {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 44px;
          margin-top: 3px;

          .btn {
            width: 90px;
            height: 52px;
            background: url('../../../images/ferris_wheel/pink_btn1.png') no-repeat;
            background-size: 100%;

            &:nth-of-type(2) {
              background: url('../../../images/ferris_wheel/pink_btn10.png') no-repeat;
              background-size: 100%;
            }

            &:nth-of-type(3) {
              background: url('../../../images/ferris_wheel/pink_btn100.png') no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      &.show_data {
        .wheel,
        .wheel_tit {
          display: none;
        }
        .wheel_base {
          background: none;
        }
      }
    }

    &.content_3 {
      overflow-y: scroll;
      height: 540px;
      .wheel_info,
      .wheel_base,
      .wheel_tit {
        display: none;
      }

      .wheel_pice {
        display: flex;
        justify-content: space-between;
        margin: 0 48px;

        .item {
          width: 126px;
          color: rgba(#371010, 0.7);
          font-style: normal;
          font-weight: 500;
          text-align: center;
          font-size: 12px;

          .img {
            width: 121px;
            height: 121px;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffe8ea 0%, #ffd1d6 100%);
            position: relative;
            .send {
              position: absolute;
              bottom: 2px;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              align-items: center;
              justify-content: center;
              width: 95px;
              height: 18px;
              background-color: #fff;
              border-radius: 20px;
              text-align: center;
              line-height: 18px;
              font-size: 12px;
              color: rgba(#371010, 0.6);
              .icon {
                width: 14px;
                height: 14px;
                background: url('../../../images/ferris_wheel/tick.png') no-repeat;
                background-size: contain;
                margin-left: 2px;
              }
              span {
                display: inline-block;
                transform: scale(0.8);
              }
            }
            img {
              width: 100%;
              height: 100%;
              border: none;
              font-size: 0;
            }
          }

          .name {
            padding: 6px 0;
          }

          .price {
            span {
              color: #f37171;
            }
          }

          .ainput {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px 0 4px 0;
            .adm-input {
              width: 55px;
              height: 24px;
              margin: 0 4px;
            }
            input {
              border-radius: 12px;
              background: rgba(#fff, 0.2);
              width: 55px;
              height: 24px;
              color: #371010;
              text-align: center;
              font-size: 12px;
            }

            .a_btn {
              width: 24px;
              height: 24px;
              line-height: 22px;
              text-align: center;
              border-radius: 50%;
              border: 1px solid #fff;
              background: #f37171;
              color: #fff;
              font-weight: 800;
              font-size: 16px;
            }
          }

          .btn {
            margin: 14px auto 0;
            color: #fff;
            line-height: 37px;
            width: 109px;
            font-size: 14px;
            height: 37px;
            border-radius: 56px;
            border: 1px solid #fff;
            background: linear-gradient(94deg, #ff7d7d 6.71%, #ffd978 94.87%);
            box-shadow:
              0px 5px 8px 0px rgba(255, 255, 255, 0.55) inset,
              0px -5px 7px 0px rgba(255, 30, 30, 0.34) inset,
              0px 4px 6px 0px rgba(255, 67, 67, 0.25);
          }
        }
      }
      .record {
        width: 307px;
        min-height: 200px;
        margin: 50px auto 100px;
        background-color: #ffd9dd;
        border-radius: 16px;
        padding: 0.1px;
        .tit_icon {
          margin: -16px auto 0;
          text-align: center;
          width: 186px;
          height: 42px;
          line-height: 42px;
          background: url('../../../images/ferris_wheel/modal_tit.png') no-repeat;
          background-size: cover;
          color: #fff;
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }

  .adm-center-popup-wrap {
    max-width: 303px;
    min-width: 303px;
  }

  .adm-center-popup-body {
    background: #ffd9dd;
    padding-top: 24px;
    // max-width: 303px;
    // min-width: 303px;
    // width: 303px;
    .adm-modal-content {
      padding: 0 31px;
    }
    .no_money {
      text-align: center;
      color: #561e1e;
      font-size: 16px;
      font-weight: 500;
      .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        padding-bottom: 18px;
        .btn {
          width: 109px;
          height: 37px;
          line-height: 37px;
          &.a {
            border-radius: 56px;
            background: #fff;
            color: rgba(#561e1e, 0.6);
          }
          &.b {
            color: #fff;
            border-radius: 56px;
            border: 1px solid #fff;
            background: linear-gradient(94deg, #ff7d7d 6.71%, #ffd978 94.87%);
            box-shadow:
              0px 5px 8px 0px rgba(255, 255, 255, 0.55) inset,
              0px -5px 7px 0px rgba(255, 30, 30, 0.34) inset,
              0px 4px 6px 0px rgba(255, 67, 67, 0.25);
          }
        }
      }
    }
    .title {
      position: absolute;
      top: -17px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      width: 186px;
      height: 42px;
      line-height: 42px;
      background: url('../../../images/ferris_wheel/modal_tit.png') no-repeat;
      background-size: cover;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
    .record {
      min-height: 200px;
      color: #561e1e;
      padding-top: 12px;
      background: url('../../../images/ferris_wheel/modal_bg_logo.png') no-repeat;
      background-size: 130px 99px;
      background-position: right bottom 20px;
      // min-height: 380px;
      .list {
        height: 48vh;
        box-sizing: border-box;
        overflow-y: scroll;
        .item_data {
          margin-bottom: 12px;
        }
        .item {
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #561e1e;
          .info {
            .name {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .time,
          .note {
            color: #561e1e;
            opacity: 0.6;
            font-size: 12px;
            transform: scale(0.86);
            margin-left: -4px;
          }
          .note {
            text-align: right;
            width: 90px;
          }
        }
        .more_note {
          margin-top: 4px;
          color: #561e1e;
          opacity: 0.6;
          line-height: 20px;
          padding: 12px;
          font-size: 12px;
          box-sizing: border-box;
          background: rgba(#561e1e, 0.2);
          border-radius: 20px 0 20px 20px;
        }
      }

      img {
        width: 100%;
        margin-top: 20px;
      }
    }
  }
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}
